<template>
  <div id="databox">
    <button @click="setKeys">通过key选中河南和河北</button>
    <button @click="getKeys">获取所有选中项的keys</button>
    <button @click="getNodes">获取所有选中项的nodes</button>
    <button @click="resetChecked">清空所有选中状态</button>
    <button @click="getNode">通过key获取河北省节点</button>
    <SearchTree
      ref="tree"
      node-key="id"
      :data="treeList"
      :show-checkbox="true"
      :default-checked-keys="[1103]"
      :default-expanded-keys="[1103, 1105]"
      @node-click="handleClick"
    ></SearchTree>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      treeList: [
        {
          "id": 1000,
          "name": "河南省",
          "children": [{
            "id": 1009,
            "name": "新乡市",
            "children": [{
              "id": 1119,
              "name": "新乡市宏力大道店",
              "children":[{
                "id": 911,
                "name": "消防中心",
              }]
            }, {
              "id": 1120,
              "name": "新乡市胜利北街店"
            }, {
              "id": 1121,
              "name": "新乡市首比街店"
            }]
          },
          {
            "id": 1016,
            "name": "巩义市",
            "children": [{
              "id": 1254,
              "name": "巩义市新兴路店"
            }]
          }]
        }, {
          "id": 1001,
          "name": "河北省",
          "children": []
        }, {
          "id": 1007,
          "name": "山东省",
          "children": [{
            "id": 1103,
            "name": "济南市",
            "children": [{
              "id": 2544,
              "name": "济南市无影山西路店"
            }, {
              "id": 2545,
              "name": "济南市堤口路店"
            }]
          }, {
            "id": 1105,
            "name": "沂市",
            "children": [{
              "id": 2561,
              "name": "沂市东岳庙店"
            }]
          }]
        }, {
          "id": 1008,
          "name": "甘肃省",
          "children": [{
            "id": 1111,
            "name": "兰州市",
            "children": [{
              "id": 2649,
              "name": "兰州市金港城店"
            }, {
              "id": 2651,
              "name": "兰州市秦安路店"
            }]
          }]
        }
      ],
    }
  },
  mounted() {
    $("#databox").on("click",".tree-checkbox",function(){
      if(!$(this).hasClass("checked")){
        $(this).siblings().trigger("click");
        $(this).addClass("checked");
      }else{
        $(this).removeClass("checked");
      }
    });
  },
  methods: {
    setKeys () {
      this.$refs.tree.setCheckedByKeys([1000, 1001], true)
    },
    getKeys () {
      const keys = this.$refs.tree.getCheckedKeys()
      console.log(keys)
    },
    getNodes () {
      const nodes = this.$refs.tree.getCheckedNodes()
      console.log(nodes)
    },
    resetChecked () {
      this.$refs.tree.resetChecked()
    },
    getNode () {
      const node = this.$refs.tree.getNodeByKey(1001)
      console.log(node)
    },
    handleClick (e, node) {
      console.log(node)
    }
  }
}
</script>

<style>
  button {
    margin: 0 5px 10px 5px;
  }
</style>
